<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-table-view{
        margin: 0;
    }
    .layui-row .layui-inline{margin-bottom: 10px;}
</style>
<body>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">日期：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="date" id="date" placeholder="请选择日期">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label w-auto">选择短剧：</label>
                    <div id="video"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">链接id：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="link_id" placeholder="请输入链接id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" id="m_pmenu" style="display:none">
                    <label class="layui-form-label w-auto">负责人：</label>
                    <div id="pMenu" style="width:250px;flex:1"></div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">链接类型：</label>
                    <div class="layui-input-inline" style="width:160px">
                        <select name="link_type" id="link_type">
                            <option value="">请选择</option>
                            <option value="1">微信小程序</option>
                            <option value="2">抖音小程序</option>
                            <option value="3">H5</option>
                            <option value="4">APP</option>
                        </select>
                    </div>
                </div>
                <!-- <button type="button" class="layui-btn" id="accountRefresh" style="margin-bottom: 10px;">刷新</button> -->
                <input type="hidden" name="media_id" id="media_id">
                <div class="layui-inline">
                    <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                    <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
    </div>
    <table id="launchDetail" lay-filter="launchDetail"></table>
    <script>
        let date = GetQueryString('date')
        let media_id = GetQueryString('media_id')
        let cost_sort = ''
        let actual_cost_sort = ''
        $('#media_id').val(media_id)
        let totalObj = {}
        let params = {
            elem: '#launchDetail'
            , url: `/cps/launch/detail` //数据接口
            , where:{
                date,
                media_id,
                cost_sort,
                actual_cost_sort
            }
            , id: 'launchDetail'
            , page:true
            , limit:15
            , totalRow:true
            , cols: [[ //表头
                {title: '平台', width: 95,totalRowText: '总合计：', align:'center', templet: function (d) {
                        return d.platform == 1 ? '抖音巨量' : d.platform == 2 ? '快手磁力' : d.platform == 3 ? '百度营销' : d.platform == 4 ? '腾讯广告' : ''
                    }
                }
                , { field: 'date', width: 120, title: '日期', align:'center'}
                , { field: 'link_id', width: 70, title: '链接id', align:'center'}
                , { field: 'cost',width: 100, title: '消耗', align:'center', sort:true}
                , { field: 'actual_cost',width: 110, title: '实际消耗', align:'center', sort:true}
                , { field: 'register_user_num',width: 100, title: '注册用户', align:'center'}
                , { field: 'activation_user_num',width: 100, title: '激活用户', align:'center'}
                , { field: 'current_recharge',width: 100, title: '当天充值', align:'center'}
                , { field: 'total_recharge', width: 100,title: '累计充值', align:'center'}
                , { field: 'current_income',width: 100, title: '当天收益', align:'center'}
                , { field: 'total_income', width: 100,title: '累计收益', align:'center'}
                , { field: 'current_recovery', width: 100,title: '返后ROI', align:'center'}
                , { field: 'total_recovery', width: 100,title: '累计ROI', align:'center'}
                , { field: 'revenue', width: 90,title: '利润', align:'center'}
                , { field: 'conversion_number',width: 100, title: '充值人数', align:'center'}
                , { field: 'new_recharge_number',width: 90, title: '新充笔数', align:'center'}
                , { field: 'new_user_number', width: 90,title: '新充人数', align:'center'}
                , { field: 'conversion_cost',width: 90,title: '转化成本', align:'center'}
                , { field: 'conversion_rate',width: 90, title: '转换率', align:'center'}
                , { field: 'fans_cost',width: 90, title: '粉丝成本', align:'center'}
                , { field: 'per_capita_contribution', width: 120, title: '人均充值', align:'center'}
                , { field: 'video_name', title: '短剧名称', width: 150, align:'center'}
                , { field: 'responsibility_person_name', title: '负责人', width: 100, align:'center'}
            ]],
            customTotal:function(wheres){
                getTotal('/cps/launch/detailCount',totalObj,wheres).then(val=>{
                    totalObj = val
                })
            },
            done:function(){
                setPrice(totalObj)
            },
            reset:function(){
                params.where = {date,media_id};
                $('#media_id').val(media_id)
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#date',
                        value:date
                    });
                })
            }
        }
        tableList(params)

        let selectParams2 = {
            url: '/cps/video/select',
            elem: '#video',
            selected: [],
            tips: '选择短剧',
            name: 'video_id',
            field_id: 'id',
            field_Name: 'name',
        }
        selectN(selectParams2)

        if(JSON.parse(user_login_message).is_branch_office_manage==1){
            $('#m_pmenu').show();
            let selectParams = {
                url:'/cps/responsibilityPerson/select?type=2&company_id='+JSON.parse(user_login_message).company_id,
                selected:[],
                tips:'请选择',
                name: 'responsibility_person_id',
                field_id:'responsibility_person_id',
                field_Name:'responsibility_person_name',
                elem: '#pMenu'
            }
            selectN(selectParams)
        }
        layui.use(['laydate','table'], function(){
            var laydate = layui.laydate;
            var table = layui.table;
            laydate.render({
                elem: '#date',
                value:date
            });

            table.on('sort(launchDetail)', function(obj){ 
                if(obj.field == 'cost'){
                    cost_sort = obj.type;
                    actual_cost_sort = ''
                }
                if(obj.field == 'actual_cost'){
                    cost_sort = '';
                    actual_cost_sort = obj.type
                }
                table.reload('launchDetail', {
                    initSort: obj
                    ,where: { 
                        date,
                        media_id,
                        cost_sort,
                        actual_cost_sort
                    }
                });
            })
        })
        
        function setPrice(totalObj){
            Object.keys(totalObj).forEach(item=>{
                $(`.layui-table-total td[data-field=${item}] .layui-table-cell`).text(totalObj[item]);
            })
        }
    </script>
</body>

</html>